<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 500px;
        height: 500px;
        background: blue;
      }
      .center {
        width: 300px;
        height: 300px;
        background: red;
      }
      .inner {
        width: 100px;
        height: 100px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="center">
        <div class="inner"></div>
      </div>
    </div>
    <script>
      // window---document----html---- body ---- outer --- center --- inner
      var outerEle = document.querySelector(".outer");
      var centerEle = document.querySelector(".center");
      var innerEle = document.querySelector(".inner");
      // 1.元素 由小到大来依次触发事件 叫事件的冒泡机制；
      // 2.元素由大到小来移除触发事件  叫事件捕获机制；
      // 默认是冒泡机制； 和 addEventListener 第三个参数有关系 默认是false 冒泡机制；
      // 捕获触发事件 第三个参数写成true

      window.addEventListener(
        "click",
        function () {
          console.log("window");
        },
        true
      );

      document.addEventListener(
        "click",
        function () {
          console.log("document");
        },
        true
      );
      document.documentElement.addEventListener(
        "click",
        function () {
          console.log("html");
        },
        true
      );

      document.body.addEventListener(
        "click",
        function () {
          console.log("body");
        },
        true
      );

      outerEle.addEventListener(
        "click",
        function () {
          console.log("outer");
        },
        true
      );

      centerEle.addEventListener(
        "click",
        function () {
          console.log("center");
        },
        true
      );

      innerEle.addEventListener(
        "click",
        function (e) {
          console.log("inner", e);
        },
        true
      );

      // 目标元素 ；可以通过事件对象来获取 e.target；
    </script>
  </body>
</html>
